<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/jquery.mobile-1.4.5.css">
</head>

<body>
    <header class="aui-bar aui-bar-nav">
        <a href="" class="aui-pull-left"><span class="aui-iconfont aui-icon-left" ></span></a>
        <div class="aui-title" id="aui-title"></div>
    </header>
    <ul id="chat">
      
  </ul>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/SHA1.js"></script>
<script type="text/javascript" src="../../script/emoji.js"></script>
<script type="text/javascript" src="../../script/date.js"></script>
<script type="text/javascript">
  $('a span').on('click',function(){
    var UIChatBox = api.require('UIChatBox');
    UIChatBox.hide();
    UIChatBox.close();
    api.closeFrame({
        name: 'Customer'
    });
  });

  function sendsms(){
    rong.setOnReceiveMessageListener(function(ret, err){
      var receive = ret.result.message.content.text;
      var html = '';
      var data = ret.result.message.content.extra;
      var sendid = ret.result.message.senderUserId;
      $api.setStorage('targetid',sendid);

      var strs = new Array();
      strs = data.split('*');
      var tx = strs[0];
      var targetname = strs[1];
      if($api.getStorage('kefu').id==$api.getStorage('userdata').uid){
        $api.byId('aui-title').innerHTML = targetname;
      }
    html = '<li class="aui-chat">'+
        '<div class="aui-chat-header">'+date()+'</div>'+
        '<div class="aui-chat-item aui-chat-left">'+
            '<div class="aui-chat-media">'+
                '<img src="'+tx+'" />'+
            '</div>'+
            '<div class="aui-chat-inner">'+
                '<div class="aui-chat-content">'+
                    '<div class="aui-chat-arrow"></div>'+
                    receive+
                '</div>'+
                '<div class="aui-chat-status aui-chat-status-refresh">'+
                '</div>'+
            '</div>'+
        '</div>'+
        '</li>';
        $api.append($api.byId('chat'),html);
    });
  }
  window.apiready = function(){
    var kefu = $api.getStorage('kefu');

    $api.setStorage('targetid','');

    rong = api.require('rongCloud2');
    rong.init(function(ret, err) {

      if (ret.status == 'success') {
        
        sendsms();

        rong.connect({
          token : $api.getStorage('rong_token')
        }, function(ret, err) {
          if(ret.status=='success'){
            
          }
        });
      } else {
        api.toast({
          msg : '当前产生了连接错误',
          duration:1500
        });
      }
    });
    var title = '暂无消息';
    if($api.getStorage('kefu').id!=$api.getStorage('userdata').uid){
    
      title = $api.getStorage('kefu').name+'在线';
    }
    $api.byId('aui-title').innerHTML = title;


    var UIChatBox = api.require('UIChatBox');
    UIChatBox.open({
      placeholder:'请输入发送内容',
      autoFocus:true,
      emotionPath:'widget://image/emotion',
      texts:{
        recoraBth:{
          normalTitle:'按住 说话',
          activeTitle:'松开 结束'
        },
        sendBtn:{
          title:'发送'
        }
      },
      styles: {
        speechBtn:{
          normalImg:'widget://image/cam1.png',
          activeImg:'widget://image/key1.png'
        },
        inputBar:{
          borderColor:'#ccc',
          bgColor:'#fff'
        },
        inputBox:{
          borderColor:'#fca236',
          bgColor:'#f2f2f2',
          boardBgColor:'#f2f2f2'
        },
        emotionBtn:{
          normalImg:'widget://image/face2.png'
        },
        recordBtn:{
          normalBg:'#ddd',
          activeBg:'#c4c4c4',
          color:'#000',
        },
        recordPanelBtn:{
          normalImg:'',
          activeImg:'',
          width:100,
          height:100
        },
        extrasBtn:{
          normalImg:'widget://image/add1.png'
        },
        indicator:{
          target:'both',
          color:'#c4c4c4',
          activeColor:'#9e9e9e'
        }
      },
      extras:{
        titleSize:16,
        titleColor:'#a3a3a3',
        isAdaptScreenSize:true,
        btns:[{
          title:'图片',
          normalImg:'widget://image/album1.png'
        },{
          title:'图片',
          normalImg:'widget://image/album1.png'
        }]
      }
    },function(ret,err){
      if(ret.eventType=='send'){
        var userdata = $api.getStorage('userdata');
        var tx;
        var name;
        if(kefu.id==userdata.uid){
          tx = '../../image/kefu.png';
          name = kefu.name;
          id = $api.getStorage('targetid');
        }else{
          tx = userdata.avatar;
          name = userdata.nickname;
          id = kefu.id;
        }


        var txt = ret.msg;
        var html='';
        html = '<li class="aui-chat">'+
        '<div class="aui-chat-header" id="aui-chat-header">'+date()+'</div>'+
        
        '<div class="aui-chat-item aui-chat-right">'+
            '<div class="aui-chat-media">'+
                '<img id="userAvater" src='+tx+' />'+
            '</div>'+
            '<div class="aui-chat-inner">'+
                '<div class="aui-chat-name" id="username"></div>'+
                '<div class="aui-chat-content">'+
                    '<div class="aui-chat-arrow"></div>'+txt+
                '</div>'+
                '<div class="aui-chat-status">'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</li>';

        $api.append($api.byId('chat'),html);
        rong.sendTextMessage({
                conversationType : 'PRIVATE',
                targetId : id,
                text : txt,
                extra : tx+'*'+name
        }, function(ret, err){

        });

        // if(ret.eventType=='send'){
        //   var html='';
        //   html += 
        //   '<li>'+
        //   '<div class="aui-chat-header" id="aui-chat-header"></div>'+
        //   '<div class="aui-chat-item aui-chat-right">'+
        //     '<div class="aui-chat-media">'+
        //         '<img id="userAvater" src='+userdata.avatar+' />'+
        //     '</div>'+
        //     '<div class="aui-chat-inner">'+
        //         '<div class="aui-chat-name" id="username"></div>'+
        //         '<div class="aui-chat-content">'+
        //             '<div class="aui-chat-arrow"></div>'
        //             +ret.msg+
        //         '</div>'+
        //         '<div class="aui-chat-status">'+
        //             '<i class="aui-iconfont aui-icon-info aui-text-danger"></i>'+
        //         '</div>'+
        //     '</div>'+
        // '</div>'+
        // '</li>';
        //   $api.byId('chat').innerHTML = html;
        //   $api.byId('aui-chat-header').innerHTML = time;

        // }
      }

    });
  }

</script>
</html>
